<template>
	<view>
		<view class="bg-gray">
			<view class="bg-green">
				<tar title='订单详情'></tar>
				<view class="width content">
					<view class="flex-row-start greencolor bold">
						<u-icon 
							name="checkmark-circle-fill" 
							color="#499C43" 
							class="iconchhli"
							size="48">
						</u-icon>
						待使用
					</view>
					<view class="bg-white commonbg">
						<view class="flex-row-start font16">
							<view class="line"></view>
							基础信息
						</view>
						<view class="iteminfo flex-row-start color9">
							编号
							<view class="color3 rightfont">{{info.orderNo}}</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							下单时间
							<view class="color3 rightfont">{{info.createTime}}</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							实付金额
							<view class="color3 rightfont">¥ 0</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							付款方式
							<view class="color3 rightfont">余额</view>
						</view>
					</view>
					<view class="bg-white ordersingle">
						<ordersingle :infor='info'></ordersingle>
					</view>
					<!-- <view class="bg-white commonbg">
						<view class="flex-row-start font16">
							<view class="line"></view>
							售后信息
						</view>
						<view class="iteminfo flex-row-start color9">
							申请取消时间
							<view class="color3 rightfont">2024-08-08 12:30</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							申请原因
							<view class="color3 rightfont">退款</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							备注
							<view class="color3 rightfont">备注备注备注备注</view>
						</view>
					</view>
					<view  class="apply">
						<u-button type="primary" shape='circle' @click="jump('/pages/myorder/addtimegame')">加时申请</u-button>
					</view>
					<view  class="apply">
						<u-button type="primary" shape='circle' class="apply"  @click="jump('/pages/myorder/applyshouhou')">售后申请</u-button>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOrderD } from "@/api/ordermy.js";
import storage from "@/utils/storage.js"; //缓存
import ordersingle from "@/components/huashuiwan/ordersingle.vue";
import tar from "@/components/huashuiwan/tar.vue";
export default {
	data() {
		return {
			showBack:true,
			info:{}
		};
	},
	components: {
		ordersingle,
		tar
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		this.getInfo({type:options.type,id:options.id})
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		leftClick(){},
		getInfo(data){
			 getOrderD(data).then(res=>{
				 this.info = res
			 })
		},
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.apply{
		margin-top: 20px;
	}
	.baoxiuimg{
		flex: 0 0 30%; 
		height: 100px;
		margin-top: 10px;
	}
	.iconchhli{
		margin-right: 8px;
	}
	.ordersingle{
		border-radius: 12px;
		margin-top: 14px;
	}
	.commonbg{
		padding: 12px 20px;
		border-radius: 12px;
		margin-top: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
		.rightfont{
			padding-left: 10px;
		}
		.iteminfo{
			margin-top: 15px;
		}
		.fontbottom{
			line-height: 24px;
			margin-top: 8px;
		}
	}
	.bg-green{
		background: linear-gradient( 180deg, rgba(174,239,139,0.56) 0%, rgba(174,239,139,0) 100%);
	}
	.content{
		margin-top: 10px;
	}
	.baoxiu{
		background-color: #F4F6F8;
		display: inline-block;
		padding: 2px 7px;
		border-radius: 10px;
		color: #999999;
		margin-right: 10px;
	}
	.bg-gray{
		padding-bottom: 50px;
	}
</style>